import React, { useState, useEffect } from 'react'
import { Card, message, Table, Tag } from 'antd'
import { getAllRights } from '../../app/rights'

export default function () {

    const [allRights, setAllRights] = useState([])
    useEffect(async () => {
      const { data, meta } = await getAllRights('list')
      if(meta.status !== 200) return message.error('获取权限列表失败')
      data.forEach((item,index) => item.key = index)
      setAllRights(data)
      message.success('获取角色列表成功')
    }, [])
    // tabel 表格列标签标题
    const columns = [
      {
          title: '#',
          dataIndex: 'key',
          key: 'key'
        },
      {
        title: '权限名称',
        dataIndex: 'authName',
        key: 'authName'
      },
      {
        title: '路径',
        dataIndex: 'path',
        key: 'path'
      },
      {
        title: '权限等级',
        dataIndex: 'level',
        key: 'level',
        render:(text) => {
          let context
          let tagColor
          switch (text) {
            case '0':
              context = '等级一'
              tagColor = 'processing'
              break
            case '1':
              context = '等级二'
              tagColor = 'success'
              break
            case '2':
              context = '等级三'
              tagColor = 'warning'
              break
            default:
              break
          }
          const component = <Tag color={tagColor} >{context}</Tag>
          return component
        }
      }
    ]
    return (
        <Card>
            <Table bordered pagination={false} dataSource={allRights} columns={columns} scroll={{y:'700px'}} />
        </Card>
    )
}